<template>
    <div class="box">
        <h1>玩任务赚积分</h1>
        <div class="renwu" v-for="(v,i) in renwudata" :key="i">
            <img :src="v.tb" alt="">
            <span>
                {{v.title}} <span class="shuzi">+10</span>
            </span>
            <van-button type="info" class="btn" @click="fn()">领任务</van-button>   
        </div>
    </div>
</template>
<script>
import Vue from "vue";
import { Toast } from "vant";
Vue.use(Toast);
export default {
    props: ['renwudata'],
    methods: {
        fn(){
            Toast("领取成功");
        }
    },
}
</script>
<style scoped>
.box{
    padding: 10px 20px;
    margin-bottom: 20px;
}
h1{
    font-weight: 600;
}
.renwu{
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 56px;
    margin: 20px 0;
    border-bottom: 1px solid #ccc;
    padding-bottom: 20px;

}
.renwu img , .renwu span ,.renwu .btn{
    align-self: center;
}
.renwu .shuzi{
    color: red;
}
.renwu img{
    width: 40px;
    height: 40px;
}
span{
    font-size: 14px;

}
</style>